<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pure-nav-bar
				title="固定在顶部"
				is-fixed
				is-back
				back-text="返回"
			>
			</pure-nav-bar>

			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-nav-bar title="首页"> </pure-nav-bar>
			</pj-demo>

			<!-- 返回 -->
			<pj-demo title="返回">
				<pure-nav-bar
					title="首页"
					isBack
					:auto-back="false"
					@onBack="handleBackClick"
				>
				</pure-nav-bar>
				<pure-gap></pure-gap>
				<pure-nav-bar
					title="首页"
					isBack
					backText="返回"
					:auto-back="false"
					@onBack="handleBackClick"
				>
				</pure-nav-bar>
				<pure-gap></pure-gap>
				<pure-nav-bar
					title="首页"
					isBack
					backText="返回"
					backIconName=""
					:auto-back="false"
					@onBack="handleBackClick"
				>
				</pure-nav-bar>
			</pj-demo>

			<!-- 标题左对齐 -->
			<pj-demo title="标题左对齐">
				<pure-nav-bar
					title="首页"
					isBack
					:autoBack="false"
					titleAlign="left"
				>
				</pure-nav-bar>
			</pj-demo>

			<!-- 左侧插槽 -->
			<pj-demo title="左侧插槽">
				<pure-nav-bar
					title="首页"
					isBack
				>
					<template #left>
						<view class="menu">
							<view class="menu-icon">
								<pure-icon name="__home"></pure-icon>
							</view>
							<text class="menu-text">首页</text>
						</view>
					</template>
				</pure-nav-bar>
			</pj-demo>

			<!-- 右侧插槽 -->
			<pj-demo title="右侧插槽">
				<pure-nav-bar
					title="首页"
					isBack
				>
					<template #right>
						<view class="menu">
							<view class="menu-icon">
								<pure-icon name="__edit"></pure-icon>
							</view>
						</view>
					</template>
				</pure-nav-bar>
			</pj-demo>

			<!-- 默认插槽 -->
			<pj-demo title="默认插槽">
				<pure-nav-bar>
					<pure-search class="search"></pure-search>
				</pure-nav-bar>
			</pj-demo>
		</view>

		<pure-gap size="200px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref, computed } from "vue";
	import { onLoad, onReady, onShow } from "@dcloudio/uni-app";

	onLoad(() => {
		console.log("onLoad");
		console.log(uni.getSystemInfoSync());
	});

	// 返回按钮点击事件
	function handleBackClick() {
		uni.showToast({
			title: "点击了返回按钮",
			icon: "none",
			mask: true
		});
	}
</script>

<style lang="scss" scoped>
	.menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 8px;
		line-height: 1;
		gap: 2px;

		&-icon {
			font-size: var(--pure-font-size-big);
		}

		&-text {
			font-size: var(--pure-font-size-mini);
		}
	}

	.search {
		--pure-search-background: var(--pure-background-light);
		--pure-search-height: 36px;
	}
</style>
